<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据源管理</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <script src="/style/public/publicStyle.js"></script>
    <style>
        .layui-table-click {
            background-color:#1E9FFF;
            color:#fff;
        }
    </style>
</head>

<body>
<!--表格-->
<div class="weadmin-body">
    <div class="layui-row">
        <table class="layui-hide" id="tableDataList" lay-filter="mainTableFilter"></table>
    </div>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">字典项</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-row">
                    <table class="layui-hide" id="sunTable" lay-filter="sunTableFilter"></table>
                </div>
            </div>
        </div>
    </div>

</div>


<!--表格操作-->
<script type="text/html" id="op">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<!--表格操作-->
<script type="text/html" id="fieldOp">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="itemEdit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="itemDelete">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <input class="text" style="height:35px;width:257px;" name="" id="hiddenFilter" placeholder="根据编码名称过滤"/>
    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="addDict">新增</button>
</script>

<script type="text/html" id="filedtoolbarDemo">
    <div class="layui-btn-container" id="filedtoolbarDiv">
        <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="addSdItem">新增</button>
    </div>
</script>

<div class="layui-row" id="tableForm" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" id="formId" style="margin-top:20px" lay-filter="tableForm">
            <input type="text"  style="display: none;" name="idDict"/>
            <div class="layui-form-item">
                <label class="layui-form-label">编码</label>
                <div class="layui-input-block">
                    <input type="text" name="cd" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="na" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input type="text" name="des" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal layui-btn-submit " lay-submit="" lay-filter="saveDoic">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-row" id="dicItemForm" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" id="itemForm" style="margin-top:20px" lay-filter="itemForm">
            <input type="text"  style="display: none;" name="idSdItem"/>
            <input type="text"  style="display: none;" name="idSd" id="idSd"/>
            <div class="layui-form-item">
                <label class="layui-form-label">编码</label>
                <div class="layui-input-block">
                    <input type="text" name="cd" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="na" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input type="text" name="des" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal layui-btn-submit " lay-submit="" lay-filter="saveItem">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    var idSd=0;
    layui.use(['util', 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
        var util = layui.util
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格、
            , form = layui.form;
        table.render({
            elem: '#tableDataList'
            , even: false //开启隔行背景
            , cellMinWidth: 80
            , toolbar: '#toolbarDemo'
            , defaultToolbar: []
            , tpy: 'post'
            , url: '/etl/baseSd/findByPage'
            , cols: [[
                , {field: 'idSd', title: 'ID', hide: true}
                , {field: 'cd', title: '编码'}
                , {field: 'na', title: '名称'}
                , {field: 'des', title: '备注'}
                , {fixed: 'right', title: '操作', align: 'center', toolbar: '#op'}
            ]]
            , page: true
        });
        table.render({
            elem: '#sunTable'
            , even: true //开启隔行背景
            , data: []
            , toolbar: '#filedtoolbarDemo'
            ,url: '/med/baseSdItem/findBySd'
            ,where: {
                idSd:idSd
            }
            , cols: [[
                , {field: 'idSdItem', title: 'ID', hide: true}
                , {field: 'idSd', title: 'ID', hide: true}
                , {field: 'cd', title: '字典项编码'}
                , {field: 'na', title: '字典项名称'}
                , {field: 'des', title: '备注'}
                , {fixed: 'right', title: '操作', align: 'center', toolbar: '#fieldOp'}
            ]]
            ,page: false
        });

//监听行工具事件
        table.on('tool()', function (obj) { //注：tool 是工具条事件名，mainTableFilter 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent == 'edit') {
                form.val("tableForm", data);
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "编辑字典",
                    area: ['520px', '430px'],
                    content: $("#tableForm")//引用的弹出层的页面层的方式加载修改界面表单
                });
            } else if (layEvent == 'delete') {
                layer.confirm('删除字典' + data.na + '会级联删除对应的字典项，是否继续？', {
                    btn: ['继续', '取消'], //按钮
                }, function () {
                    layer.closeAll('dialog');
                    $.ajax({
                        type: "get",
                        url: "/etl/baseSd/delete",
                        async: true,
                        data: {'idDict': data.idDict},
                        success: function (json) {
                            table.reload("tableDataList");
                            table.reload("fileTable");
                        }
                    });
                });
            }else if(layEvent == 'itemEdit'){
                form.val("itemForm", data);
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "编辑字典项",
                    area: ['520px', '430px'],
                    content: $("#dicItemForm")//引用的弹出层的页面层的方式加载修改界面表单
                });
            }else if(layEvent == 'itemDelete'){
                var idSdItem =data.idSdItem;
                layer.confirm('删除字典项' + data.na + '，是否继续？', {
                    btn: ['继续', '取消'], //按钮
                }, function () {
                    layer.closeAll('dialog');
                    $.ajax({
                        type: "get",
                        url: "/med/baseSdItem/delete",
                        async: true,
                        data: {'idSdItem': idSdItem},
                        success: function (json) {
                            table.reload("sunTable",{where:{idSd:idSd}});
                        }
                    });
                });
            }
        });

//监听表头
        table.on('toolbar()', function (obj) {
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            switch (obj.event) {
                case 'addDict':
                    $("#formId")[0].reset();
                    form.render();
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "新增字典",
                        area: ['520px', '430px'],
                        content: $("#tableForm")//引用的弹出层的页面层的方式加载修改界面表单
                    });
                    break;
                case 'addSdItem':
                    if(idSd==0) {
                        layer.alert("请先选择字典");
                        return ;
                    }
                    $("#itemForm")[0].reset();
                    form.render("itemForm");
                    $("#idSd").val(idSd);
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "新增字典项",
                        area: ['520px', '430px'],
                        content: $("#dicItemForm")//引用的弹出层的页面层的方式加载修改界面表单
                    });
                    break;

            }
        });
        //监听行单击事件（双击事件为：rowDouble）
        table.on('row(mainTableFilter)', function (obj) {
            idSd = obj.data.idSd;
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            table.reload("sunTable",{where:{idSd:idSd}});
        });
        form.on('submit(saveItem)', function (massage) {
            $.ajax({
                type: "post",
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                url: "/med/baseSdItem/save",
                data:JSON.stringify(massage.field),
                success: function (data) {
                    table.reload("sunTable",{where:{idSd:idSd}});
                }
            });
            layer.closeAll();
            return false;
        });
        form.on('submit(saveDoic)', function (massage) {
            $.ajax({
                url: '/etl/baseSd/save',
                type: 'post',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify(massage.field),
                success: function (msg) {
                    table.reload("tableDataList");
                }
            })
        });
    });

</script>

</html>